"use client";

import { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Space, Toast } from "antd-mobile";
import { CloseOutline, MoreOutline, SearchOutline } from "antd-mobile-icons";
// import { DemoBlock } from "demos";
import React from "react";

import image1 from "/img(1)/image(1).png";
import image2 from "/img(4)/image(1).png";
import image3 from "/img(4)/image(2).png";
import image4 from "/img(4)/image.png";
const products = [
  {
    id: 1,
    name: "善托 霉拮吸入粉雾剂",
    image: image1,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    category: "季节用药",
  },
  {
    id: 2,
    name: "美林 布洛芬小儿混悬液",
    image: image2,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    category: "上海制药",
  },
  {
    id: 3,
    name: "小儿咳喘灵口服液",
    image: image3,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    category: "儿童用药",
  },
  {
    id: 4,
    name: "善托 霉拮吸入粉雾剂",
    image: image1,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    category: "季节用药",
  },
  {
    id: 5,
    name: "美林 布洛芬小儿混悬液",
    image: image4,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    category: "上海制药",
  },
  {
    id: 6,
    name: "美林 布洛芬小儿混悬液",
    image: image4,
    price: 168.0,
    oldPrice: 198.0,
    desc: "自营/93",
    stock: 20,
    category: "上海制药",
  },
  {
    id: 7,
    name: " 布洛芬小儿混悬液",
    image: image4,
    price: 16.0,
    oldPrice: 18.0,
    desc: "自营/93",
    stock: 20,
    category: "上海制药",
  },
];
export default function Searchbar() {
  const [filteredProducts, setFilteredProducts] = useState(products); // 新增

  const navigate = useNavigate();

  const back = () => {
    navigate(-1);
  }

  return (
    <div
      style={{
        minHeight: "100vh",
        background: "linear-gradient(135deg, #f8fafc 0%, #e0e7ff 100%)",
        padding: "40px 0",
      }}
    >
      <NavBar onBack={back}>
        <h3
          style={{
            textAlign: "center",
            fontSize: 28,
            fontWeight: 700,
            color: "#3b3b3b",
            letterSpacing: 2,
            marginBottom: 36,
            textShadow: "0 2px 8px rgba(60,60,100,0.08)",
          }}
        >
          推荐列表
        </h3>
      </NavBar>

      <div>
        {filteredProducts.length === 0 ? (
          <div style={{ color: "#888", textAlign: "center", marginTop: 32 }}>
            未找到相关商品
          </div>
        ) : (
          <div style={{ marginTop: 32 }}>
            {filteredProducts.map((item) => (
              <div
                key={item.id}
                style={{
                  display: "flex",
                  alignItems: "center",
                  background: "#fff",
                  borderRadius: 20,
                  boxShadow: "0 4px 24px rgba(80,100,200,0.10)",
                  padding: 22,
                  marginBottom: 28,
                  maxWidth: 480,
                  marginLeft: "auto",
                  marginRight: "auto",
                  transition: "transform 0.18s, box-shadow 0.18s",
                  cursor: "pointer",
                  position: "relative",
                }}
                onMouseEnter={(e) => {
                  e.currentTarget.style.transform = "scale(1.025)";
                  e.currentTarget.style.boxShadow =
                    "0 8px 32px rgba(80,100,200,0.16)";
                }}
                onMouseLeave={(e) => {
                  e.currentTarget.style.transform = "scale(1)";
                  e.currentTarget.style.boxShadow =
                    "0 4px 24px rgba(80,100,200,0.10)";
                }}
                onClick={() => navigate(`/xiangq/${item.id}`)}
              >
                <img
                  src={item.image}
                  alt={item.name}
                  style={{
                    width: 90,
                    height: 90,
                    objectFit: "cover",
                    borderRadius: 16,
                    marginRight: 22,
                    background: "#f6f6f6",
                    border: "2px solid #e0e7ff",
                    boxShadow: "0 2px 8px rgba(80,100,200,0.08)",
                  }}
                />
                <div style={{ flex: 1 }}>
                  <div
                    style={{
                      fontWeight: 700,
                      fontSize: 19,
                      color: "#222",
                      marginBottom: 8,
                      letterSpacing: 1,
                    }}
                  >
                    {item.name}
                  </div>
                  <div
                    style={{
                      color: "#6c63ff",
                      fontSize: 15,
                      marginBottom: 6,
                      fontWeight: 500,
                    }}
                  >
                    {item.category}
                  </div>
                  <div
                    style={{ display: "flex", alignItems: "baseline", gap: 10 }}
                  >
                    <span
                      style={{ color: "#f40", fontWeight: 700, fontSize: 20 }}
                    >
                      ￥{item.price.toFixed(2)}
                    </span>
                    <span
                      style={{
                        color: "#aaa",
                        fontSize: 15,
                        textDecoration: "line-through",
                      }}
                    >
                      ￥{item.oldPrice.toFixed(2)}
                    </span>
                  </div>
                </div>
                {/* <button
                  style={{
                    background:
                      "linear-gradient(90deg, #6c63ff 0%, #48c6ef 100%)",
                    color: "#fff",
                    border: "none",
                    borderRadius: 8,
                    padding: "10px 20px",
                    fontWeight: 600,
                    fontSize: 15,
                    marginLeft: 18,
                    cursor: "pointer",
                    boxShadow: "0 2px 8px rgba(80,100,200,0.10)",
                    transition: "background 0.18s, box-shadow 0.18s",
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background =
                      "linear-gradient(90deg, #48c6ef 0%, #6c63ff 100%)";
                    e.currentTarget.style.boxShadow =
                      "0 4px 16px rgba(80,100,200,0.18)";
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.background =
                      "linear-gradient(90deg, #6c63ff 0%, #48c6ef 100%)";
                    e.currentTarget.style.boxShadow =
                      "0 2px 8px rgba(80,100,200,0.10)";
                  }}
                  onClick={() => navigate(`/xiangq/${item.id}`)}
                >
                  查看详情
                </button> */}
              </div>
            ))}
          </div>
        )}
      </div>
    </div>
  );
}
